<template>
	<view @click.stop="nodeClick" class="flex px-24 py-24 border-b-1 flex-col-full"
		:class="[_value['disabled'] ? 'opacity-5' : '']">
		<view :userInteractionEnabled="false" class="flex flex-row flex-between">
			<zh-text :followTheme="isSelected ? props.followTheme : false" :color="isSelected ? props.color : ''"
				:label="_value[props.fieldNames.label]"></zh-text>
			<view :font-size="30" class="flex flex-row flex-row-center-end">
				<tm-icon :followTheme="isSelected ? props.followTheme : false" :font-size="28" v-if="isSelected"
					:color="isSelected ? props.color : ''" name="tmicon-check">
				</tm-icon>
				<tm-icon :font-size="22" v-if="!isSelected && _value['children']" name="tmicon-angle-right"
					color="grey-1"></tm-icon>
			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
	import { computed, ref, Ref, watch, getCurrentInstance, inject, toRaw, watchEffect, nextTick, PropType } from 'vue'
	import { childrenData } from './interface'
	const proxy = getCurrentInstance()?.proxy ?? null
	const emits = defineEmits(['click'])
	const props = defineProps({
		followTheme: {
			type: [Boolean, String],
			default: true
		},
		fieldNames: {
		    type: Object,
		    default: () => {
		      return { label: 'title', value: 'key', children: 'children' };
		    },
		  },
		/**
		 * 导入的数据
		 */
		data: {
			type: Object as PropType<childrenData>,
			default: () => { },
			required: true
		},
		color: {
			type: String,
			default: 'primary'
		},
		level: {
			type: Number,
			default: 0
		},
		keyIndex: {
			type: Number,
			default: 0
		}
	})
	//父级方法。
	let parent : any = proxy?.$parent

	while (parent) {
		if (parent?.tmCascaderName == 'tmCascader' || !parent) {
			break
		} else {
			parent = parent?.$parent ?? null
		}
	}
	const ParentActivedLs = inject(
		'tmCascaderValue',
		computed(() => [])
	)
	const _value = computed(() : childrenData => props.data)
	const _activeId : Ref<string | number> = ref('')
	function queryNode() {
		let xd = ParentActivedLs.value.filter((el) => el == _value.value[props.fieldNames.value])
		_activeId.value = xd.length > 0 ? xd[0] : ''
	}
	watchEffect(() => queryNode())
	const isSelected = computed(() => _activeId.value == _value.value[props.fieldNames.value])
	function nodeClick() {
		if (_value.value['disabled']) return
		parent?.pushValue(_value.value, props.level, _value.value[props.fieldNames.value], props.keyIndex)
		if (typeof _value.value?.children === 'object' && Array.isArray(_value.value?.children) && _value.value?.children.length >= 0) {
			//进入下一步页面操作。

			parent?.addActiveIndex(props.level + 1, props.keyIndex, props.data)
		} else {
			//说明已经到了最后一层，发布确认id请求。
			nextTick(() => {
				parent?.endSelected()
			})
		}
 		parent?.pushValue(_value.value, props.level, _value.value[props.fieldNames.value]);
		emits('click')
	}
</script>